<template>
  <van-form>
    <div ref="contentToConvert">
      <van-cell-group>
        <van-field label="外观和标志检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.appearanceStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.appearanceStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="灯光系统检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.lamplightStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.lamplightStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="制动系统检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.brakeStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.brakeStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="轮胎和底盘检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.tirechassisStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.tirechassisStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="发动机及排放系统检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.motorStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.motorStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="车辆电器检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.appliancesStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.appliancesStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="仪表和控制系统检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.controlStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.controlStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="内饰和安全设备检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.interiorStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.interiorStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="安全和应急检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.safeStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.safeStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>

        <van-field label="车载电子设备检查" readonly label-width="200">
          <template v-slot:input>
            <span
              :style="{
                color: chejianitem.electronStatus === 0 ? 'green' : 'red',
                display: 'inline-block',
                textAlign: 'right',
                width: '100%',
              }"
            >
              {{ chejianitem.electronStatus === 0 ? '合格' : '不合格' }}
            </span>
          </template>
        </van-field>
      </van-cell-group>
      <div class="container">
        <span class="chepai">{{ chepai }}</span>
        <span class="shijian">{{ shijian }}</span>
      </div>
    </div>
    <van-button type="primary" @click="createPDF">导出为pdf</van-button>
  </van-form>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

const useroute = useRoute()
const chejianitem = ref(JSON.parse(useroute.query.data))
const chepai = ref(useroute.query.chepai)
const shijian = ref(useroute.query.shijian)
const contentToConvert = ref(null)

async function createPDF() {
  const element = contentToConvert.value
  const canvas = await html2canvas(element)
  const imgData = canvas.toDataURL('image/png')
  const pdf = new jsPDF()
  pdf.addImage(imgData, 'PNG', 10, 10, 190, 0)
  pdf.save('车检具体报告.pdf')
}
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-between; /* 使两者两端对齐 */
  align-items: center; /* 垂直居中对齐 */
}
</style>
